<template>
  <div>
    <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  </div>
</template>

<script>
  import {getEchartsData} from '@/api/user'
  //引入echarts对象
  var echarts = require('echarts');
  export default {
    name: "CountryMap",
    data() {
      return {

      }
    },
    //钩子函数(在创建vue对象的时候会调用这个方法)
    mounted() {
      this.getData();
    },
    methods: {

      getData(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        var $this = this;
        getEchartsData().then(function(res){
          // 绘制图表
          myChart.setOption({
            title: {text: '在Vue中使用echarts'},
            tooltip: {},
            toolbox: {
              show: true,
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
              }
            },
            dataZoom: [
              {
                type: 'slider',
                show: true,
                start: 0,
                end: 20,
                handleSize: 6,
                minSpan: 100,
              },
              {
                type: 'inside',
                start: 0,
                end: 100
              },
              {
                type: 'slider',
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 12,
                height: '100%',
                handleSize: 6,
                showDataShadow: false,
                left: '93%'
              }
            ],
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: res.data.data
            }]
          });
        }).catch(function(){

        })
      }
    }
  }
</script>

<style scoped>

</style>
